<template>
 <el-dialog :title="title +'———'+ detStandard" :visible.sync="visible" center>
  <el-container>
    <el-main>
      <el-row class="btn-group" :hidden='detHeadVis'>
      <el-button  class="btn"  @click="addData"><span>添加</span> <i class="el-icon-plus"></i>
      </el-button>
      <el-button  class="btn"  @click="editorData"><span>编辑</span> <i class="el-icon-edit"></i>
      </el-button>
      <el-button  class="btn"  @click="deleteData"><span>删除</span> <i class="el-icon-delete"></i>
      </el-button>
      </el-row>
      <el-table style="height: 100%"
                v-loading="loading"
                element-loading-text="给我一点时间"
                @selection-change="selectDatas"
                :data="detList">
        <el-table-column type="selection" width="30" v-if='!detHeadVis'> </el-table-column>
        <el-table-column sortable align="center" prop="standard_big" label="收费标准大类ID" width="150" v-if="false"></el-table-column>
        <el-table-column sortable align="center" prop="standard_bigname" label="收费标准大类" width="150" v-if="false" >
           <template slot-scope="scope">
            <span>{{detStandard}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="standard_id" label="收费标准ID" width="150" v-if="false"></el-table-column>
        <el-table-column sortable align="center" prop="standard_name" label="收费标准" width="150" ></el-table-column>
        <el-table-column sortable align="center" prop="standard_model" label="收费模式" width="145" :formatter="renderModel"></el-table-column>
        <el-table-column sortable align="right"  prop="standard_stime" label="起始时间" width="100"></el-table-column>
        <el-table-column sortable align="center" prop="standard_etime" label="结束时间" width="170"></el-table-column>
        <el-table-column sortable align="center" prop="standard_pre" label="预付费" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="standard_cycle" label="计费周期" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="standard_freetime" label="免费时长" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="standard_topfee" label="小车封顶金额（分）" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="standard_bigcartopfee" label="大车封顶金额（分）" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="standard_st" label="小车计时标准" ></el-table-column>
        <el-table-column sortable align="center" prop="standard_sc" label="小车计次标准" ></el-table-column>
        <el-table-column sortable align="center" prop="standard_bt" label="大车计时标准" ></el-table-column>
        <el-table-column sortable align="center" prop="standard_bc" label="大车计次标准" ></el-table-column>
      </el-table>
    </el-main>
     <cha-sta-det-add-form :detFormVisible.sync = "detFormVisible"
                           :detStandard = "detStandard"
                           :isCrea = "isCrea"
                           :detStandardNo = "detStandardNo"
                           :chaDetData = "chaDetData"
                           :timeLimit = "timeLimit"
                           @addChaDetData = "addChaDetData"
     ></cha-sta-det-add-form>
  </el-container>
 </el-dialog>
</template>

<script>
import chaStaDetAddForm from "./chaStaDet/chaStaDetAddForm";
import { deleteChargeStandardDetail } from "../../../api/chargeStandard";
export default {
  name: "cha-sta-det-editor",
  components: {
    chaStaDetAddForm
  },
  data() {
    return {
      downloadLoading: false,
      visible: false, // from是否显示
      detFormVisible: false, // 收费标准细类添加form
      // detHeadVis: true,         // 按钮和多选是否显示
      title: "标准细类",
      chaDetData: "",
      selectList: [], // 获取的选中行
      isCrea: "",
      timeLimit: []
    };
  },
  props: [
    "loading",
    "dialogDetVisible",
    "detHeadVis",
    "detList",
    "detStandard",
    "detStandardNo"
  ],
  watch: {
    dialogDetVisible: function(val) {
      this.visible = val;
    },
    visible: function(val) {
      this.$emit("update:dialogDetVisible", val);
    },
    detHeadVis: function(val) {
      if (val) {
        this.title = "标准细类";
      } else {
        this.title = "编辑细类";
      }
    },
    detList: function(val) {
      this.timeLimit = [];
      for (const i of val) {
        let obj = {};
        let arr = [];
        for (const j in i) {
          if (j == "standard_stime") {
             arr.push(i[j]);
          } else if (j == "standard_etime") {
            arr.push(i[j]);
          }
        }
        obj.name = i.standard_name;
        obj.time = arr;
        this.timeLimit.push(obj);
        // arr = [];
        // obj = {};
      }
    }
  },
  methods: {
    renderModel: function(row, column) {
      return row.standard_model == 1
        ? "按时"
        : row.standard_model == 2 ? "按次" : "未知";
    },
    handleDownloadfinacia() {
      this.downloadLoading = true;
    },
    addData() {
      this.detFormVisible = true;
      this.isCrea = true;
      this.chaDetData = {standard_model: "1",standard_bigname:this.detStandard};
    },
    editorData() {
      if (this.selectList.length != 1) {
        this.$message({
          type: "warn",
          message: "请选择一条记录进行编辑！",
          duration: 2000
        });
      } else {
        this.detFormVisible = true;
        this.isCrea = false;
        this.chaDetData = this.selectList[0];
        this.chaDetData.standard_bigname=this.detStandard;
      }
    },
    addChaDetData(data, val) {
      if (val == 1) {
        this.detList.unshift(data);
      } else {
        for (let v of this.detList) {
          if (v.standard_id === data.standard_id) {
            const index = this.detList.indexOf(v);
            this.detList.splice(index, 1, data);
            break;
          }
        }
      }
    },
    selectDatas(val) {
      // 通过复选框获取收费标准列表选中多行
      this.selectList = val;
    },
    deleteData() {
      if (!this.selectList.length) {
        this.$message({
          type: "info",
          message: "请选择需要删除的数据",
          duration: 2000
        });
        return;
      }
      if (this.selectList.length) {
        this.$confirm("此操作将永久删除选中的记录,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let deData = [];
            for (let i = this.selectList.length - 1; i >= 0; i--) {
              deData.push(this.selectList[i].standard_id);
            }
            deleteChargeStandardDetail(deData).then(
              () => {
                for (const v of this.selectList) {
                  let indexOf = this.detList.indexOf(v);
                  this.detList.splice(indexOf, 1);
                }
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success",
                  duration: 2000
                });
              },
              () => {
                this.$message({
                  type: "error",
                  message: "删除失败",
                  duration: 2000
                });
              }
            );
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
              duration: 2000
            });
          });
      }
    }
  }
};
</script>

<style scoped>
.btn-group > .el-button span {
  display: none;
}
.btn-group > .el-button:hover {
  background-color: #409eff;
}
.btn-group > .el-button:hover span {
  display: block;
}
.btn-group > .el-button:hover i {
  display: none;
}
</style>

